<template>
  <div>
    <div>
      <div style="height: 50px; font-size: 40px" v-if="!playState">
        {{ countdown }}秒后自动进入无人教育页面
      </div>
    </div>
    <div class="card-content">
      <Card
        v-for="(item, index) in cardList"
        :key="index"
        :title="item.title"
        :remark="item.remark"
        @click="goToTrain(item.id)"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import Card from "@renderer/components/card/card.vue";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router"; // 添加这一行以导入 useRouter
const router = useRouter();
const countdown = ref(120); // 设置倒计时状态
const vlcContainer = ref(null);
let interval: ReturnType<typeof setInterval>;
const cardList = ref([
  {
    id: 1,
    title: "无人教育",
    remark:
      "自动识别教室在场工人人脸，自动签到、根据岗位自动匹配课程、自动播放",
  },
  {
    id: 2,
    title: "专题教育",
    remark:
      "现场管理人员自行选择某个课程包,课程开始播放，同时开始识别在场工人并记学时",
  },
  {
    id: 3,
    title: "通用教育",
    remark:
      "现场管理人员自行组织教育（宣讲PPT、讲话教育等）,不依托系统内培训素材，可应用系统进行签到和学时记录",
  },
]);
// 启动倒计时
const startCountdown = () => {
  interval = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--;
    } else {
      clearInterval(interval); // 倒计时结束，清除定时器
      //关闭识别
      // closeDefenseApi();
      //判断jobList的长度是否大于1，如果大于1，则随机选择一个工种，否则选择第一个工种
      let jobTypeName = jobTypeList.value[0];
      if (jobTypeList.value.length > 1) {
        jobTypeName = "公共方案";
      } else {
        jobTypeName = jobTypeList.value[0];
      }
      //获取待播放课件
      getPlayCoursewareApi({ jobTypeName }).then((res) => {
        if (res.code === 2000) {
          //推送签到状态
          sign();
          //开始播放
          playState.value = true;
          if (res.data == null) {
            ElNotification({
              title: "Error",
              message: "没用对应工种的方案",
              type: "error",
            });
          } else {
            //获取到待播放课件
            planInfo.value = res.data;
            //设置播放的课件,默认播放第一个
            courseUrl.value = planInfo.value.planCourses[0].course.courseUrl;
          }
        }
      });
    }
  }, 1000);
};
function goToTrain(id: number) {
  switch (id) {
    case 1:
      router.push("/train");
      //路由到结束页面
      // router.push("/play-end");
      break;
    case 2:
      router.push("/thematic-education");
      break;
    case 3:
      router.push("/general-education");
      break;
  }
}

onMounted(() => {});
</script>

<style scoped lang="scss">
.card-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}
</style>
